<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>登入</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/login.css">
</head>

<body>
	<img class="logo" src="./img/login/logo.png" alt="">
	<form class="login_form" action="">
		<input name="username" id="username" type="text" placeholder="用户名 ">
		<input name="password" id="password" type="password" placeholder="请输入密码">
		<button id="login" type="button">登入</button>
	</form>
	<div class="relative helper">
		<a href="#">忘记密码?</a>
		<a href="#">注册</a>
		<div class="other_way">其他登入方式</div>
	</div>
	<ul class="other_ways">
		<li><a href="#"><img src="./img/login/login_way1.png" alt="">
				<div>微信</div>
			</a></li>
		<li><a href="#"><img src="./img/login/login_way2.png" alt="">
				<div>QQ</div>
			</a></li>
		<li><a href="#"><img src="./img/login/login_way3.png" alt="">
				<div>微博</div>
			</a></li>
	</ul>
	<script src="./js/axios.min.js"></script>
	<script src="./js/axios.config.js"> </script>
	<script>
		//查找元素
		var oUsername = document.querySelector('#username');
		var oPassword = document.querySelector('#password');



		oUsername.addEventListener('change', function () {
			//提取value
			var username = oUsername.value;
			var isValid = /\w{3,}/.test(username);
			if (isValid) {
				this.style.borderColor = "green";
			} else {
				this.style.borderColor = "#c55a5c";
				alert('账号至少三位字符！');

			}
			//校验标记
			this.validate = isValid;
		});
		oPassword.addEventListener('change', function () {
			//提取value
			var password = oPassword.value;
			var isValid = /\d{3,}/.test(password);
			if (isValid) {
				this.style.borderColor = "green";
			} else {
				this.style.borderColor = "#c55a5c";
				alert('密码至少三位数字！');

			}
			//校验标记
			this.validate = isValid;
		});

		var oLogin = document.querySelector('#login');
		var oForm = document.querySelector('.login_form');

		oLogin.addEventListener('click', function () {
			//提取value
			var name = oUsername.value;
			var pwd = oPassword.value;
			//校验所有表单
			var all_valid = oUsername.validate && oPassword.validate;
			if (!all_valid) {
				alert('表单校验失败,重新填写！');
				return;
			}


			axios.post("user/login", { username: name, password: pwd })
				.then(function (res) {
					if (res.status) {
						//缓存数据 
						console.log(res);
						sessionStorage.id = res.data.id;
						sessionStorage.token = res.data.token;
						//跳转页面
						location.replace("./index.html?");
					} else {
						alert(res.msg);
					}
				});
		});

	</script>
</body>

</html>